Sob covid

Coronavirus Medical Prevention Template

Created: 25/08/2021
Latest Update: 25/08/2021
by: CodexCoder
email: support@CodexCoder.com

Follow the steps below to get started with sob-covid Multipurpose HTML Template :

Open the Package/sob-theme Folder to find all the Templates Files
You will need to Upload these files to your Web Server using FTP or cPanle in order to use it on your Website.
Make sure you have upload the required files and folders listed below:
- sob-theme/demos/sob-covid/assets - Stylesheets, JavaScript, Fonts etc Folder
- sob-theme/demos/sob-covid/assets/images - Images Folder
- sob-theme/index-covid.html - Index File/Homepage
The other files can be used according to your preferences.
You're now ready to go..! Start adding your Content and show off your Brand New Website.

HTML5 & CSS3 & jQuery
Modern And Creative Design
Universal menu
100% Responsive
Well documented
Complete SASS files
Bootstrap
Icofont Used
Google Font Used
Lightcase Used
Google Map
Eye Catching Design
W3C Valid Code

sob-covid has follows a simple coding structure. here is the sample:

	
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		
		<!-- google fonts -->
		<link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&display=swap" rel="stylesheet">
		<link rel="shortcut icon" type="image/x-icon" href="demos/sob-covid/assets/images/x-icon/01.png">


        <link rel="stylesheet" href="assets/css/plugins/animate.css">
        <link rel="stylesheet" href="assets/css/plugins/icofont.min.css">
        <link rel="stylesheet" href="assets/css/plugins/lightcase.css">
        <link rel="stylesheet" href="assets/css/plugins/swiper-bundle.min.css">
        <link rel="stylesheet" href="assets/css/vendors/bootstrap.min.css">
        <link rel="stylesheet" href="assets/css/preloder.css">
        <link rel="stylesheet" href="assets/css/demo-view.css">
		<link rel="stylesheet" href="demos/sob-covid/assets/css/style.min.css">
		
		<title>Sob Covid</title>
	</head>

	<body>
		<div class="mobile-menu">
			<nav class="mobile-header">
				<div class="header-logo">
					<a href="index-covid.html"><img src="demos/sob-covid/assets/images/logo/04.png" alt="logo"></a>
				</div>
				<div class="header-bar">
					<span></span>
					<span></span>
					<span></span>
				</div>
			</nav>
			<nav class="mobile-menu">
				<div class="mobile-menu-area">
					<div class="mobile-menu-area-inner">
						<ul class="lab-ul">
                            <li class="active"><a href="#">Home</a>
                                <ul class="lab-ul">
                                    <li><a href="index-covid.html">Covid 19 Home Page</a></li>
                                    <li><a href="index-covid-onepage.html">Covid 19 One Page </a></li>
                                </ul>
                            </li>
                            <li><a href="#">Pages</a>
                                <ul class="lab-ul">
                                    <li><a href="demos/sob-covid/about.html">About Page</a></li>
                                    <li><a href="demos/sob-covid/faq.html">Faq</a></li>
                                    <li><a href="demos/sob-covid/outbreak.html">Outbreak</a></li>
                                </ul>
                            </li>
                            <li><a href="demos/sob-covid/service.html">Prevention</a></li>
                            <li><a href="#">Blog</a>
                                <ul class="lab-ul">
                                    <li><a href="demos/sob-covid/blog.html">Blog Page</a></li>
                                    <li><a href="demos/sob-covid/blog-single.html">Blog Single</a></li>
                                </ul>
                            </li>
                            <li><a href="#0">Shop</a>
                                <ul class="lab-ul">
                                    <li><a href="demos/sob-covid/shop-page.html">Products Page</a></li>
                                    <li><a href="demos/sob-covid/shop-single.html">Product Single</a></li>
                                    <li><a href="demos/sob-covid/cart-page.html">Cart Page</a></li>
                                </ul>
                            </li>
                            <li><a href="demos/sob-covid/contact.html">Contact</a></li>
                        </ul>
					</div>
				</div>
			</nav>
		</div>

		<header class="header-section home-7">
			<div class="header-area">
				<div class="container">
					<div class="primary-menu">
						<div class="logo">
							<a href="index-covid.html"><img src="demos/sob-covid/assets/images/logo/01.png" alt="logo"></a>
                        </div>
						<div class="main-area">
							<div class="main-menu">
								<ul class="lab-ul">
                                    <li class="active"><a href="#">Home</a>
                                        <ul class="lab-ul">
                                            <li class="active"><a href="index-covid.html">Covid 19 Home Page</a></li>
                                            <li><a href="index-covid-onepage.html">Covid 19 One Page </a></li>
                                        </ul>
                                    </li>
                                    <li><a href="#">Pages</a>
                                        <ul class="lab-ul">
                                            <li><a href="demos/sob-covid/about.html">About Page</a></li>
                                            <li><a href="demos/sob-covid/faq.html">Faq</a></li>
                                            <li><a href="demos/sob-covid/outbreak.html">Outbreak</a></li>
                                        </ul>
                                    </li>
                                    <li><a href="demos/sob-covid/service.html">Prevention</a></li>
                                    <li><a href="#">Blog</a>
                                        <ul class="lab-ul">
                                            <li><a href="demos/sob-covid/blog.html">Blog Page</a></li>
                                            <li><a href="demos/sob-covid/blog-single.html">Blog Single</a></li>
                                        </ul>
                                    </li>
                                    <li><a href="#0">Shop</a>
                                        <ul class="lab-ul">
                                            <li><a href="demos/sob-covid/shop-page.html">Products Page</a></li>
                                            <li><a href="demos/sob-covid/shop-single.html">Product Single</a></li>
                                            <li><a href="demos/sob-covid/cart-page.html">Cart Page</a></li>
                                        </ul>
                                    </li>
                                    <li><a href="demos/sob-covid/contact.html">Contact</a></li>
                                </ul>
							</div>
							<div class="header-btn">
								<a href="#" class="lab-btn"><span>Donate<i class="icofont-heart"></i></span></a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</header>

		<a href="#" class="scrollToTop"><i class="icofont-swoosh-up"></i><span class="pluse_1"></span><span class="pluse_2"></span></a>

        <script src="assets/js/vendors/jquery-3.6.0.min.js"></script>
        <script src="assets/js/vendors/modernizr-3.11.2.min.js"></script>
        <script src="assets/js/vendors/bootstrap.bundle.min.js"></script>
        <script src="assets/js/plugins/isotope.pkgd.min.js"></script>
        <script src="assets/js/plugins/lightcase.js"></script>
        <script src="assets/js/plugins/swiper-bundle.min.js"></script>
        <script src="assets/js/plugins/wow.min.js"></script>
        <script src="assets/js/plugins/jquery.waypoints.min.js"></script>
        <script src="demos/sob-covid/assets/js/functions.js"></script>
        <script src="assets/js/demo-view.js"></script>
	</body>
</html>

We are using several CSS files in this Template. CodexCoder Always follow the latest trends of coding standard. Many browser interpret the default behavior of HTML elements differently. By using a general reset CSS file, we can work round this. This file also contains some general styling, such as anchor tag colors, font-sizes, etc. Keep in mind, that these values might be overridden somewhere else in the file.

CSS Fiile Included

Animate css used
Bootstrap css used
Lightcase used
Swiper used
Icofont used
Style.css used
and some other necessary css files

style.css situated on assets/css/ contain the the all necessary custom style which is well organized and following are the style.css file structure :

	 
	/*!
	Template Name: SobTheme
	Template URI: https://themeforest.net/user/CodexCoder
	Author: CodexCoder.net
	Author URI: https://themeforest.net/user/CodexCoder
	Description: Description
	Version: 1.0.0
	Text Domain: sob-covid
	Tags: clinic, corona, coronavirus, Coronavirus disease, coronavirus prevention, covid, sob-covid, sob-covid advises, sob-covid template, doctors, hospital, medical, medical advises, ncov-2019, responsive

	*/
	/*--------------------------------------------------------------
	>>> TABLE OF CONTENTS:
	----------------------------------------------------------------
	# Normalize
	# Typography
	# Global CSS
	# Header CSS
		*Style-1
		*Style-2
		*Mobile Header
	# Page Header
	# Banner
		*Style-1
		*Style-2
	# Service
	# Corona-Count
	# Team
	# Safe-Actions
	# About
		*Style-1
		*Style-2
	# Blog
		*Style-1
		*Style-2
		*Style-3
		*Blog Single
	# Blog Widget
	# Sponsor
	# FAQ
	# Contact Us
	# Fore Zero Page
	--------------------------------------------------------------*/
	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}

	body {
		margin: 0;
		padding: 0;
		background: $white-color;
		@include breakpoint(max-lg) {
			margin-top: 72px;
		}
	}

	/*--------------------------------------------------------------
	# Typography
	--------------------------------------------------------------*/
	body,
	button,
	input,
	select,
	optgroup,
	textarea {
		color: $desc-color;
		font-family: $roboto;
		font-size: $fs-base;
		line-height: 1.5;
	}

	h1, h2, h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, a h1, a h2, a h3, a h4, a h5, a h6   {
		clear: both;
		font-weight: 700;
		line-height: 1.4;
		font-family: $roboto;
		color: $title-color;
	}
	h1 {
		font-size: $fs-h1;
	}

	h2{
		font-size: $fs-h4;
	}

	h3 {
		font-size: $fs-h4;
	}

	--------------------------------------------------------------*/

	 
	/* @@@@@@@@@@@@@  Header Section Start Here  @@@@@@@@@@@@@@ */
.section-header {
  text-align: center;
  margin-bottom: 30px; }
  @media (min-width: 992px) {
    .section-header {
      max-width: 70%;
      margin: 0 auto 60px; } }
  @media (min-width: 1200px) {
    .section-header {
      max-width: 63%; } }
  .section-header h2 {
    margin-bottom: 15px;
    margin-top: -10px; }
    @media (min-width: 992px) {
      .section-header h2 {
        margin-bottom: 20px; } }

/* @@@@@@@@@@@@@  lab Item Start Here  @@@@@@@@@@@@@@ */
.service-item .service-inner {
  margin: 15px 0;
  padding: 20px;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px; }
  @media (min-width: 768px) {
    .service-item .service-inner {
      margin: 15px;
      padding: 30px; } }
  .service-item .service-inner .service-thumb {
    margin-bottom: 20px; }
    .service-item .service-inner .service-thumb img {
      width: 93px;
      height: 93px;
      -webkit-border-radius: 100%;
      -moz-border-radius: 100%;
      border-radius: 100%; }
  .service-item .service-inner .service-content h4 {
    margin-bottom: 5px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease; }
    @media (min-width: 992px) {
      .service-item .service-inner .service-content h4 {
        margin-bottom: 15px; } }
  .service-item .service-inner .service-content p {
    margin-bottom: 0; }

.corona-item {
  padding: 15px; }
  .corona-item .corona-inner {
    align-items: center; }
    .corona-item .corona-inner .corona-thumb img {
      width: 70px;
      height: 70px; }
    .corona-item .corona-inner .corona-content {
      margin-left: 15px; }
      .corona-item .corona-inner .corona-content h3 {
        margin-bottom: 0; }
        @media (min-width: 576px) {
          .corona-item .corona-inner .corona-content h3 {
            line-height: 36px; } }
      .corona-item .corona-inner .corona-content p {
        margin-bottom: 0; }

.post-item .post-item-inner {
  box-shadow: 0 0 8px rgba(136, 136, 136, 0.08);
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease; }
  .post-item .post-item-inner .post-thumb a {
    display: block; }
    .post-item .post-item-inner .post-thumb a img {
      width: 100%; }
  .post-item .post-item-inner .post-content {
    padding: 30px 20px;
    background: #fff; }
    .post-item .post-item-inner .post-content h6 {
      margin-bottom: 0; }
    .post-item .post-item-inner .post-content .entry-meta .date {
      font-size: 16px;
      color: #696969;
      display: inline-block; }
    .post-item .post-item-inner .post-content .author-date {
      justify-content: flex-start;
      align-items: center;
      margin: 10px 0 15px; }

We are using several Js files in this Template. CodexCoder Always follow the latest trends of coding standard. Many browser interpret the default behavior of HTML elements differently. By using a general reset Js file, we can work round this. This file also contains some general styling, such as anchor tag colors, font-sizes, etc. Keep in mind, that these values might be overridden somewhere else in the file.

Js Fiile Included

jquery-3.6.0.min.js used
modernizr-3.11.2.min.js used
bootstrap.bundle.min.js used
isotope.pkgd.min.js used
lightcase.js used
swiper-bundle.min.js used
wow.min.js used
jquery.waypoints.min.js used
wow.min.js used
functions.js used
and some other necessary css files

functions.js situated on assets/css/ contain the the all necessary custom style which is well organized and following are the functions.js file structure :

	 
	(function($){
    "use strict";
    $(document).ready(function() {
        // lightcase 
        $('a[data-rel^=lightcase]').lightcase();

        // Header Section Menu Part
        $("ul li ul").parent("li").addClass("menu-item-has-children");

        // drop down menu width overflow problem fix
        $('ul').parent().on('hover', function() {
            var menu = $(this).find("ul");
            var menupos = $(menu).offset();
            if (menupos.left + menu.width() > $(window).width()) {
                var newpos = -$(menu).width();
                menu.css({ left: newpos });
            }
        });

        // mobile menu responsive
        $(document).on('click','.header-bar',function(){
            $(".header-bar").toggleClass("close");
            $(".mobile-menu").toggleClass("open");
        });

        //mobile drodown menu display
        $('.menu-item-has-children>a').on('click', function(e){
            event.preventDefault();
        });
        $('.mobile-menu-area ul li a, .shop-menu li a').on('click', function(e) {
            var element = $(this).parent('li');
            if (element.hasClass('open')) {
                element.removeClass('open');
                element.find('li').removeClass('open');
                element.find('ul').slideUp(1000,"swing");
            }
            else {
                element.addClass('open');
                element.children('ul').slideDown(1000,"swing");
                element.siblings('li').children('ul').slideUp(1000,"swing");
                element.siblings('li').removeClass('open');
                element.siblings('li').find('li').removeClass('open');
                element.siblings('li').find('ul').slideUp(1000,"swing");
            }
        });

Sob covid

Coronavirus Medical Prevention Template

Installation

Features At A Glance

HTML Structure

CSS Structure

Js Structure

Credits

jQuery

CSS & Fonts